$(function () {
    // 设置组件拖动
    $(".tools .tool-item").draggable({
        helper: function( event ) {
            return $(`<div style="width: 100%;display: flex;justify-content: center;align-content: center">
                    <input style='width: 50%;height: 30px;border: 1px solid #eee;box-shadow: 0 0 8px rgba(0,0,0,.3)' />
                </div>`);
        }
    })
    // 设置单元格放置组件
    $("#table td").droppable({
        accept: ".tool-item",
        drop: function (e,ui) {
            // 获取被拖动的组件
            const component = ui.draggable[0]
            const event = component.dataset.event
            switch (event) {
                case "text":
                    let editDiv = creatTextNode()
                    $(this).html(editDiv)
                    editDiv.focus()
                    break;
                case "input":

            }
        }
    })

    // 创建文本组件
    const creatTextNode = () => {
        let node = $("<div class='component-text'></div>")
        node.text("双击输入文本")
        // node.css({
        //     width: "100%",
        //     height: "100%",
        //     textAlign: "center"
        // })
        node.on("dblclick", function () {
            node.attr("contenteditable","true")
            node.focus()
        })
        node.on("blur", function () {
            console.log("blur")
            node.attr("contenteditable","false")
        })
        node.on("keydown", function () {
            console.log("blur")
            node.attr("contenteditable","false")
        })
        return node
    }
    // 输入框组件
    const createTextAreaNode = () => {
        $("")
    }
})